<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org"
      th:replace="~{fragments/layout :: layout(~{::title}, ~{::section})}">
<head>
    <title th:text="#{exchanges.title}">Exchanges - SnackMQ Console</title>
</head>
<body>
<section>
    <div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
        <h4 class="h4" th:text="#{exchanges.management}">Exchange Management</h4>
    </div>

    <div class="row">
        <!-- Declare Exchange Form -->
        <div class="col-md-6">
            <div class="card exchange-form-card">
                <div class="card-header" th:text="#{exchanges.declare.new}">
                    Declare a new Exchange
                </div>
                <div class="card-body">
                    <form th:action="@{/exchanges/declare}" method="post">
                        <div class="mb-3">
                            <label for="declareExchangeName" class="form-label" th:text="#{exchanges.exchange.name}">Exchange Name</label>
                            <input type="text" class="form-control" id="declareExchangeName" name="exchangeName" required>
                        </div>
                        <div class="mb-3">
                            <label for="exchangeType" class="form-label" th:text="#{exchanges.exchange.type}">Exchange Type</label>
                            <select class="form-select" id="exchangeType" name="exchangeType" required>
                                <option th:each="type : ${T(com.aiwiown.snackmq.common.routing.ExchangeType).values()}" th:value="${type}" th:text="${type.name()}"></option>
                            </select>
                        </div>
                        <button type="submit" class="btn btn-primary" th:text="#{exchanges.declare.exchange}">Declare Exchange</button>
                    </form>
                </div>
            </div>
        </div>

        <!-- Bind Queue Form -->
        <div class="col-md-6">
            <div class="card exchange-form-card">
                <div class="card-header" th:text="#{exchanges.bind.queue}">
                    Bind a Queue (Topic) to an Exchange
                </div>
                <div class="card-body">
                    <div th:if="${error}" class="alert alert-warning" th:text="${error}"></div>
                    <form th:action="@{/exchanges/bind}" method="post">
                        <div class="mb-3">
                            <label for="bindExchangeName" class="form-label" th:text="#{exchanges.exchange.name}">Exchange Name</label>
                            <input type="text" class="form-control" id="bindExchangeName" name="exchangeName" required>
                        </div>
                        <div class="mb-3">
                            <label for="queueName" class="form-label" th:text="#{exchanges.queue.to.bind}">Queue (Topic) to Bind</label>
                            <select class="form-select" id="queueName" name="queueName" required>
                                <option value="" th:text="#{exchanges.select.topic}">-- Select a Topic --</option>
                                <option th:each="topic : ${topics}" th:value="${topic.topicName}" th:text="${topic.topicName}"></option>
                            </select>
                        </div>
                        <div class="mb-3">
                            <label for="routingKey" class="form-label" th:text="#{exchanges.routing.key}">Routing Key</label>
                            <input type="text" class="form-control" id="routingKey" name="routingKey" th:placeholder="#{exchanges.routing.key.placeholder}">
                            <div class="form-text" th:text="#{exchanges.routing.key.help}">
                                For Topic exchanges, use '.' as a separator and '*'/'#' as wildcards.
                            </div>
                        </div>
                        <button type="submit" class="btn btn-success" th:text="#{exchanges.bind.queue.button}">Bind Queue</button>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <!-- 【修改】为标题行增加状态指示器 -->
    <div class="d-flex justify-content-between align-items-center pt-3 pb-2 mb-3 gap-2">
        <h4 class="h4 mb-0" th:text="#{exchanges.existing}">Existing Exchanges</h4>
        <div id="refresh-status" class="text-muted small">
            <span class="spinner-grow spinner-grow-sm text-success" role="status" aria-hidden="true"></span>
            <span th:text="#{dashboard.live.update}">Live Update</span>
        </div>
    </div>
    <!-- 【修改】为手风琴容器增加 id，方便 JS 定位 -->
    <div class="accordion" id="exchange-list-container">
        <div th:each="exchange, iter : ${exchanges}" class="accordion-item">
            <!-- 【修改】将 h2 设置为 flex 容器，以便容纳删除按钮 -->
            <h2 class="accordion-header d-flex align-items-center" th:id="'heading' + ${iter.index}">
                <button class="accordion-button collapsed flex-grow-1" type="button" data-bs-toggle="collapse"
                        th:data-bs-target="'#collapse' + ${iter.index}" aria-expanded="false"
                        th:aria-controls="'collapse' + ${iter.index}">
                    <strong th:text="${exchange.name}"></strong>&nbsp;
                    <span class="badge bg-info text-dark" th:text="${exchange.type}"></span>
                </button>
                <!-- 【新增】删除 Exchange 的表单和按钮 -->
                <div class="p-2">
                    <form th:if="${exchange.name != T(com.aiwiown.snackmq.cluster.routing.Exchange).DEFAULT_DIRECT_EXCHANGE}"
                          th:action="@{/exchanges/delete}" method="post" class="d-inline"
                          th:onsubmit="'return confirm(\'' + #{exchanges.confirm.delete} + '\');'">
                        <input type="hidden" name="exchangeName" th:value="${exchange.name}"/>
                        <button type="submit" class="btn btn-danger btn-sm" th:text="#{common.delete}">Delete</button>
                    </form>
                    <span th:if="${exchange.name == T(com.aiwiown.snackmq.cluster.routing.Exchange).DEFAULT_DIRECT_EXCHANGE}"
                          class="text-muted small fst-italic pe-2" th:text="#{exchanges.default}">Default</span>
                </div>
            </h2>
            <div th:id="'collapse' + ${iter.index}" class="accordion-collapse collapse"
                 th:aria-labelledby="'heading' + ${iter.index}" data-bs-parent="#exchangesAccordion">
                <div class="accordion-body">
                    <h6 th:text="#{exchanges.bindings}">Bindings</h6>
                    <div th:if="${#lists.isEmpty(exchange.bindings)}" class="text-muted" th:text="#{exchanges.no.bindings}">This exchange has no
                        bindings.
                    </div>
                    <table th:if="${not #lists.isEmpty(exchange.bindings)}" class="table table-sm table-striped">
                        <thead>
                        <tr>
                            <th th:text="#{exchanges.queue.name}">Queue Name</th>
                            <th th:text="#{exchanges.routing.key}">Routing Key</th>
                            <th th:text="#{exchanges.actions}">Actions</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr th:each="binding : ${exchange.bindings}">
                            <td th:text="${binding.queueName}"></td>
                            <td th:text="${binding.routingKey}"></td>
                            <td>
                                <!-- 【新增】解除绑定的表单和按钮 -->
                                <form th:action="@{/exchanges/unbind}" method="post" class="d-inline"
                                      th:onsubmit="'return confirm(\'' + #{exchanges.confirm.unbind} + '\');'">
                                    <input type="hidden" name="exchangeName" th:value="${exchange.name}"/>
                                    <input type="hidden" name="queueName" th:value="${binding.queueName}"/>
                                    <input type="hidden" name="routingKey" th:value="${binding.routingKey}"/>
                                    <button type="submit" class="btn btn-warning btn-sm py-0 px-2" th:text="#{exchanges.unbind}">Unbind</button>
                                </form>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        <div th:if="${#lists.isEmpty(exchanges)}" class="text-center p-3" th:text="#{exchanges.no.exchanges}">No custom exchanges found.</div>
    </div>
</section>
    <!-- 国际化文本数据，供JavaScript使用 -->
    <div id="i18n-data" style="display: none;">
        <span data-i18n="exchanges.no.exchanges" th:text="#{exchanges.no.exchanges}">No custom exchanges found.</span>
        <span data-i18n="exchanges.no.bindings" th:text="#{exchanges.no.bindings}">This exchange has no bindings.</span>
        <span data-i18n="exchanges.queue.name" th:text="#{exchanges.queue.name}">Queue Name</span>
        <span data-i18n="exchanges.routing.key" th:text="#{exchanges.routing.key}">Routing Key</span>
        <span data-i18n="exchanges.actions" th:text="#{exchanges.actions}">Actions</span>
        <span data-i18n="exchanges.unbind" th:text="#{exchanges.unbind}">Unbind</span>
        <span data-i18n="exchanges.confirm.unbind" th:text="#{exchanges.confirm.unbind}">Are you sure you want to remove this binding?</span>
        <span data-i18n="common.delete" th:text="#{common.delete}">Delete</span>
        <span data-i18n="exchanges.default" th:text="#{exchanges.default}">Default</span>
        <span data-i18n="exchanges.confirm.delete" th:text="#{exchanges.confirm.delete}">Are you sure you want to delete this exchange and all its bindings? This cannot be undone.</span>
        <span data-i18n="exchanges.bindings" th:text="#{exchanges.bindings}">Bindings</span>
        <span data-i18n="dashboard.live.update" th:text="#{dashboard.live.update}">Live Update</span>
        <span data-i18n="exchanges.update.failed" th:text="#{exchanges.update.failed}">Update Failed</span>
    </div>
    
    <th:block th:replace="~{fragments/js/exchanges-js :: js}"></th:block>
</body>
</html>